<template>
  <div class="box">
    <el-card shadow="never" class="item item3">
      <el-row>
        <el-col :span="4">
          <h3></h3>
          <div class="overview-big">
            <div class="overview-mine">
              <p>预约统计</p>
              <span class="project-number">{{ count }}</span>
              <el-button
                type="primary"
                icon="el-icon-document"
                @click="handleExport"
                >导出Excel</el-button
              >
            </div>
          </div>
        </el-col>
        <!-- <div id="main3"></div> -->
        <el-col :span="14">
          <div id="main3"></div>
        </el-col>
      </el-row>
    </el-card>
    <div class="dashboard-text" style="margin: 0 30px">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="预约时间区间">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >

          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="null-tips" v-show="dataList.length == 0">
      <img src="@/assets/images/null.svg" alt="" />
      <p>查询结果为空</p>
    </div>

    <div class="wrapper">
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.description"
        placement="top"
        v-for="item in dataList"
        :key="item.labId"
      >
        <div class="occupy-box">
          <el-tag class="itemStatus" type="success">{{ item.count }}次</el-tag>
          <p class="occupyTitle">{{ item.labName }}</p>
          <p>容量:{{ item.capacity }}</p>
          <p>用途:{{ item.func }}</p>
          <p>位置:{{ item.address }}</p>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import main1 from "./echartsOptions/main1";
import main2 from "./echartsOptions/main2";
import main3 from "./echartsOptions/main3";
import { formatDate } from "@/utils/index";
import {
  resList,
  appointmentCount,
  reservationStatistics,
} from "@/api/studentUserAdmin/index";

export default {
  name: "index",
  data() {
    return {
      count: "", //预约总量
      dataList: [], //机房列表数据
      value: [],
      // 查询参数
      queryParams: {
        startTime: "", //机房名称
        endTime: "", //机房容量
      },
    };
  },
  watch: {},
  mounted() {
    // this.initEcharts(main1, "main1");
    // this.initEcharts(main2, "main2");
    this.value = [new Date(), new Date()];
    this.getList();
    this.appointmentCount();
    this.reservationStatistics();
  },
  methods: {
    //获取七天之内的预约数量
    reservationStatistics() {
      reservationStatistics().then((res) => {
        const seriesData = res.data.countList; //数据
        const xAxisData = res.data.dayList; //数据名称
        main3.series[0].data = seriesData;
        main3.xAxis.data = xAxisData;
        this.initEcharts(main3, "main3");
      });
    },
    //导出excel
    handleExport() {
      this.download(
        "system/appointment/exportCount",
        {},
        `data_${new Date().getTime()}.xlsx`
      );
    },
    //预约总量
    appointmentCount() {
      appointmentCount().then((res) => {
        this.count = res.data;
      });
    },
    initEcharts(chart, DomId) {
      let chartDom = document.getElementById(DomId);
      let myChart = echarts.init(chartDom);
      chart && myChart.setOption(chart);
    },
    itemClick(row) {
      this.$refs["popup"].showEdit(row, "edit");
    },
    /** 查询机房列表 */
    getList() {
      const loading = this.$loading({
        lock: true,
        text: "查询中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.queryParams.startTime = formatDate(this.value[0], "date");
      this.queryParams.endTime = formatDate(this.value[1], "date");
      resList(this.queryParams).then((res) => {
        loading.close();
        this.dataList = res.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.value = [];
      this.queryParams = {
        startTime: "", //机房名称
        endTime: "", //机房容量
      };
      this.getList();
    },
  },
};
</script>
  
  <style scoped lang="scss">
.box {
  box-sizing: border-box;
}
.box .item {
  border: none;
  .content::-webkit-scrollbar {
    // width: 20px;
    // height: 20px;
  }
  .content {
    width: 230px;
    height: 260px;
    margin-bottom: 10px;
    overflow-y: scroll;
    border-right: 1px solid #d6dfe9;
    .active {
      padding-left: 6px !important;
      border-left: 4px solid #036bf1;
    }
    .item-box {
      width: 100%;
      height: 20px;
      padding-left: 10px;
      margin-top: 18px;
      line-height: 20px;
      text-align: left;
      cursor: pointer;
    }
  }
  .statistics {
    width: 250px;
    height: 260px;
    #main1 {
      width: 200px;
      height: 200px;
      margin-left: 20px;
    }
    .min-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      .round {
        width: 10px;
        height: 10px;
        background: #ccc;
        border-radius: 50%;
      }
    }
  }
  .task-box {
    // border: 1px solid #ccc;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    height: 278px;
    .task-item {
      display: flex;
      align-items: center;
      width: 100%;
      .left {
        width: 80%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        span:nth-child(1) {
          margin-bottom: 6px;
        }
      }
    }
  }
  .process {
    display: flex;
    margin-top: 16px;
    .process-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 170px;
      height: 34px;
      margin-right: 16px;
      // background-image: url('../../assets/arr.png');
      background-size: 100% 100%;
      span {
        font-size: 15px;
      }
    }
    .process-item:nth-child(2) {
      // background-image: url('../../assets/arr2.png');
    }
    .process-item:nth-child(3) {
      // background-image: url('../../assets/arr3.png');
    }
    .process-item:nth-child(4) {
      // background-image: url('../../assets/arr4.png');
    }
    .process-item:nth-child(5) {
      // background-image: url('../../assets/arr5.png');
    }
    .process-item:nth-child(6) {
      // background-image: url('../../assets/arr6.png');
    }
  }

  .overview-big {
    display: flex;
    align-items: center;
    .overview-mine {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 420px;
      height: 260px;
      .project-number {
        margin: 14px auto;
        font-size: 58px;
        font-weight: 700;
        color: #3c4353;
      }
    }
  }

  #main2 {
    width: 900px;
    height: 290px;
    margin-left: 20px;
  }
  #main3 {
    flex: 1;
    height: 310px;
    margin-left: 20px;
  }
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}
.wrapper {
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(7, 160px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  margin: 30px;
  margin-top: 10px;
  /*  声明行的高度  */
  .occupy-box {
    width: 160px;
    height: 128px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #d8d8d8;
    position: relative;
    overflow: hidden;
    .itemStatus {
      position: absolute;
      top: 0;
      right: 0;
    }
    .occupyTitle {
      width: 100px;
      font-weight: 600;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      margin: 0;
      padding-left: 10px;
      margin-top: 8px;
      color: #666;
    }
    p:nth-child(4) {
      margin-top: 4px;
    }
    p:nth-child(5) {
      margin-top: 4px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}

.mgl1 {
  margin-left: 10px;
}

.mgl2 {
  margin-left: 20px;
}

.mgt1 {
  margin-top: 10px;
}

.mgt2 {
  margin-top: 20px;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 18px;
  }
}

.null-tips {
  width: 180px;
  margin: 100px auto;
  img {
    width: 180px;
  }
  p {
    text-align: center;
    color: #666;
    margin: 0;
  }
}

.delItem {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
  